<script>
export default {
  functional: true,
  render(clearElement, options) {
    let slots = options.slots();
    let props = options.props;
    let { icon, title = "标题", description, background, padding } = props;
    let slot_icon_dom =
      slots?.icon || icon
        ? clearElement("i", {
            class: ["overall-icon", icon],
          })
        : null;
    let slot_right_dom = slots.right || null;
    if (!background) {
      background = "overall-chun-title-default-bg";
    }
    if (!padding) {
      padding = "overall-chun-title-default-padding";
    }
    return clearElement(
      "div",
      {
        class: ["chunk-header", padding, background],
        style: {
          background: background ? background : null,
          padding: padding ? padding : null,
        },
      },
      [
        slot_icon_dom,
        clearElement(
          "div",
          {
            class: "value",
          },
          [
            clearElement("p", { class: "chunk-title" }, title),
            clearElement("p", { class: "header-tips" }, description),
          ]
        ),
        slot_right_dom,
      ]
    );
  },
};
</script>

<style scoped>
.chunk-icon {
  font-size: 34px;
  color: gray;
  margin-right: 6px;
}
.chunk-icon-round {
  width: 35px;
  height: 35px;
  display: block;
  background-color: #82939c88;
}

.overall-chun-title-default-bg {
  background: white;
}
.overall-chun-title-default-padding {
  padding: 8px 24px;
}
.chunk-header {
  width: 100%;
  height: 65px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.chunk-title {
  font-size: 0.9rem;
}
.header-tips {
  font-size: 0.7rem;
  margin-top: 3px;
  color: #82939c88;
}
.value {
  flex: 1;
}
</style>
